#include ("/_includes/_layout.html")
#@layout("好友助力","wxmall,点步科技","Wxmall社区","wxmall") 
<style>
.weui-media-box_hd{
	margin-right: .8em;
    width: 75px;
    height: 75px;
    line-height: 75px;
    text-align: center;
}
.weui-media-box_thumb{
    width: 100%;
    height:100%;
    vertical-align: top;
}
.weui-media-box_title{
	font-weight: 400;
    font-size: 16px;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    word-wrap: break-word;
    word-break: break-all;
}
.weui-media-box_desc{
	color: #999;
    font-size: 14px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    float: left;
    padding-top: 3px;
    line-height: 20px;
}
.price_desc{
    text-align: right;
    display: block;
    width: 100%;
}
.weui-media-box_bd{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
}
.weui-content{
	min-height: 100%
}
.menu{
	display: table;
	height: 45px;
	width: 100%;
	background: white;
	margin-bottom:10px;
}
.menu div{
	display: table-cell;
	vertical-align: middle;
}
.footer-list-box{
	background-color:#fdfdfd;	
	text-align: left;
	padding:10px 0px 10px 20px;
	margin: 10px 0px;
	border-top: 1px solid #ededed;
	border-bottom: 1px solid #ededed;
}
.footer-box{
	text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    margin: 50% 0px;
    color: #999;
}
.weui-loadmore{
	position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
#detail_list{
	position: relative;
}
</style>
#define content()
<div class="weui-tab">
	<div class="weui-navbar " style="position:fixed;  left:0; right:0; height:44px; background:#fff;">
	    <a href="#(webctx)/jifen/detail" class="weui-navbar__item proinfo-tab-tit font-14 weui-bar__item--on">好友助力</a>
   	    <a href="#(webctx)/jifen/detail/mall" class="weui-navbar__item proinfo-tab-tit font-14">积分商城</a>
   	    <a href="#(webctx)/jifen/mall/awardIndex" class="weui-navbar__item proinfo-tab-tit font-14">兑换记录</a>
    </div>
	<div class="weui-tab__bd">
	<div class="weui-tab__bd-item weui-tab__bd-item--active" id="detail_list"></div>
	<div class="weui-loadmore">
	    <i class="weui-loading"></i>
	    <span class="weui-loadmore_tips">正在加载</span>
	</div>
	</div>
</div>
#end
#define script()
<script type="text/html" id="user_tpl">
<div class="footer-list-box">
	<div style="width:45px; height:45px; margin-right: 10px; float: left;"><img style="width:100%; height:100%" src="{wxHeadimg}"/></div>
	<div style="color: black;font-size: 16px;"> {wxNick} {stauts}</div>
	<div>{updated}</div>
</div>
</script>
<script type="text/html" id="user_none_tpl">
<div class="footer-box">
	<div>暂无好友被邀请</div>
</div>
</script>
<script id="mall_tpl" type="text/html">
<div class="weui-cells" style="margin-top:0px">
	  <div class="weui-cell">
	    <div class="weui-media-box_hd">
	    	<img class="weui-media-box_thumb" src="/resources/images/{image}.png">
	    </div>
	    <div class="weui-media-box_bd">
	     <h4 class="weui-media-box_title">{title}</h4>
	     <div class="weui-media-box_desc price_desc">
	       <p class="weui-media-box_desc" style="padding-right:10px">{price} </p>
	       <a href="javascript:;" style="line-height: 2;display: inline-block; border:1px solid red;color:red" award-id="{id}" onclick="award(this)" class="weui-btn weui-btn_mini">兑换</a>
	     </div>
	    </div>
	  </div>
</div>
</script>
<script type="text/javascript">
var page = 1;
var params = {};
params.page = page;
var url = "#(webctx)/jifen/detail/userList";
submit(params,url);
	var loading = false;  //状态标记
	//滚动加载
	$(document.body).infinite().on("infinite",function(){
		if(loading) return;
		loading = true;
		page ++;
		params.page = page;
		submit(params, url);
	});
	function submit(arr,url){
		$.ajax({
			type: "post",
			url: url,
			data: arr,
			async: true,
			success: function(data){
				if(data.code != 200){
					$.toast("加载数据失败，请重新拉取");
					return;
				}else if(data.data == null){
					$(document.body).destroyInfinite();
					$('.weui-loadmore').remove();
					$("#detail_list").append($("#user_none_tpl").html());
					return;
				};
				if(data.data.length<=0 || data.data == null){
					$(document.body).destroyInfinite();
					$('.weui-loadmore').remove();
					$("#detail_list").append($("#user_none_tpl").html());
				}else{
					for( var i = 0 ; i < data.data.length ; i ++ ){
						var userData = data.data[i];
						if(userData.active){
							userData.stauts = "已关注";
						}else{
							userData.stauts = "已取关";
						}
						var html = formatTemplate(userData, $("#user_tpl").html());
						$("#detail_list").append(html);
						loading = false;
					}	
					if(data.data.length<10){
						$(document.body).destroyInfinite();
		                $('.weui-loadmore').remove();
					}
				}
			},
			error: function(){
				alert("网络异常,请联系管理员!");
			}
		});
	}
</script>
#end